<script setup>
    import { onMounted } from 'vue'
    import { getReportList } from '@/api/home'
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll"

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })


    let resData = props.list
    let dataLoading = $ref(true)

    // 事件数量
    console.log( resData)
    let eventCount = resData.length ? resData[0].numb : 0

    // 办事率
    let ratio =  resData.length ? resData[1].numb.split('%')[0] : 0

    // 列表
    let list = resData.length ?  resData.slice(-3) : []

    let eventList = $ref([])
    onMounted(() => {
        getReportList().then(res => {
            eventList = res.result
            dataLoading = false
        })
    })

</script>

<template>
    <div class="event-overview-wrap mt10">
        <div class="card-title"><img src="../../../assets/images/card-title-icon-4.png">事件概览</div>

        <div class="total">
            事件数量: <span class="num">{{ eventCount }}</span>件,
            办事率: <span class="num">{{ ratio }}</span><span class="ratio">%</span>
        </div>

        <div class="event-box flex-center">
            <img src="../../../assets/images/event.png">

            <div class="list">
                <div 
                    class="item flex"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <div class="name">{{ item.name }}</div>
                    <div class="num">{{ item.numb }}</div>
                    <div class="unit">件</div>
                </div>
            </div>

        </div>
        
        <div class="event-list" v-loading="dataLoading">
            <div class="table-head">
                <span class="title">事件名称</span>
                <span class="type">事件类型</span>
                <span class="date">上报时间</span>
                <span class="status">处理状态</span>
            </div>
            <vue3-seamless-scroll 
                :list="eventList" 
                class="info-list"
                hover
                wheel
                :singleHeight="36"
                :singleWaitTime="3000"
                :limitScrollNum="6"
            >
                <div 
                    class="item flex-between"
                    v-for="(item, index) in eventList"
                    :key="index"
                >
                    <span class="title" :title="item.eventName || item.des">{{ item.eventName || item.des }}</span>
                    <span class="type">{{ item.gridEventId_dictText }}</span>
                    <span class="date">{{ item.reportData }}</span>
                    <span class="status">{{ item.problemStatus }}</span>
                </div>
            </vue3-seamless-scroll>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .event-overview-wrap{
        .total{
            color: #fff;
            font-size: 18px;
            height: 21px;
            padding: 20px 12px;

            span{
                &.num{
                    color: #35DBD4;
                    font-weight: bold;
                    font-size: 24px;
                }
                &.ratio{
                    color: #35DBD4;
                }
            }
        }

        .event-box{
            padding: 20px 0;

            img{
                width: 183px;
                height: 183px;
            }

            .list{
                flex: 1;
                margin-left: 10px;

                .item{
                    width: 243px;
                    height: 51px;
                    line-height: 51px;
                    background: url('../../../assets/images/event-list-bg.png') center no-repeat;
                    margin-bottom: 10px;
                    padding: 0 28px;
                    font-size: 15px;
                    color: #fff;

                    .name{
                        width: 50px;
                    }

                    .unit{
                        width: 15px;
                    }

                    .num{
                        flex: 1;
                        font-size: 24px;
                        color: #39EDE2;
                        padding: 0 10px 0 20px;
                    }
                }
            }
        }

        .event-list{
            height: 240px;
            margin: 20px 0;
            overflow: hidden;

            .info-list{
                height: 196px;
                overflow: hidden;
                margin-top: 20px;
            }

            .table-head{
                height: 44px;
                line-height: 44px;
                background: linear-gradient(92deg, #0825b772, #01b3ff7c);
                display: flex;

                span{
                    text-align: center;
                    color: #fff;
                }
                .title{
                    flex: 1;
                    text-align: left;
                    margin: 0 10px;
                }

                .type{
                    width: 80px;
                }

                .date{
                    width: 100px;
                }

                .status {
                    width: 80px;
                }
            }

            .item{
                color: #fff;
                font-size: 16px;
                padding-bottom: 20px;

                span{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }

                .title{
                    flex: 1;
                    text-align: left;
                    margin: 0 10px;
                }

                .type{
                    width: 80px;
                }

                .date{
                    width: 100px;
                }

                .status {
                    width: 80px;
                }
            }
        }
    }
</style>